LiveFeed - Create and Configure Custom CSS And Connector Code

To set up a Custom LiveFeed, you must first configure your custom CSS appearance and a Custom Connector Code.
Liveclicker provides a default CSS and Connector Code that you can use as the basis for your custom CSS and Connector Code. In you want to make changes and you do not have the knowledge internally, please contact Liveclicker to assist with the custom CSS and Connector Code.

CSS code

Create a custom CSS

There are 2 ways in which a new CSS can be configured:

 

From the Account Settings

1. To configure a new CSS, go to the Account Settings in the top menu, and then navigate to Realtime content>LiveFeeds:

2. In the Custom LiveFeed Appearances section, click Add New +. A Window is loaded in which the proposed CSS code can be modified.

4. Start by naming the appearance.

5. Make the necessary changes in the CSS.

6. When done, click Add LiveSocial Appearance. The custom CSS can now be used in your LiveFeed elements.

 

From the Liveclicker campaign

1. Click on the appearance drop-down and select Create new custom appearance.

2. Name your Custom Appearance. The CSS code editor is displayed.

3. Insert your custom CSS, and click Save. A preview is displayed on the left side of the Code Editor.

The LiveFeed CSS code

Copy
Example
body {
      font-family: 'Lucida Grande';
      font-size: 10px;
      margin: 0;
}
.feedlist {
      list-style: none outside none;
      background-color: #FFFFFF;
      border: 1px solid #D3CAD7;
      padding: 0px;
      margin: 0px;
      color: #3E3E3E;
}
.feedlist li {
      border-bottom: 1px solid #D3CAD7;
      padding: 2px;
}
.feedlist li:last-child {
      border-bottom: none;
}
.itemTitle a {
      font-weight: bold;
      color: #c70000 !important;
      text-decoration: none
}
.itemTitle a:hover {
      text-decoration: underline
}
.itemDate {
      font-size: 9px;
      color: #AAAAAA;
}

 

Connector Code

Create custom Connector Code

There are 2 ways in which the Connector Code can be configured:

From the Account Settings

1. To configure a new Connector Code, go to the Account Settings in the top menu, and then navigate to Realtime content>LiveFeeds:

2. In the Custom LiveFeed Connector Code section, click Add New +.

3. A Window is loaded in which the proposed Connector code can be modified.

From the Liveclicker campaign

1. Click on the Custom LiveFeed Connector drop-down and select Create New Custom Connector Code:

2. The Code Editor is displayed. Toggle the Connector Code view on:

3. Make the necessary changes to the code. You can preview the result of the changes on the left.

4. Click Save to confirm your changes.

The Connector Code

JavaScript is the language used to implement the necessary methods for fetching and rendering the feed to a private page that will be webscraped by Liveclicker. Let's take a look at some sample code below, which is fetching and then rendering an XML feed.

Copy
Example
// JavaScript
// NOTE: _sourceUrl is set automatically to your source feed URL
// NOTE: _myFeed is automatically initialized as a JavaScript object
// NOTE: _customVariableEncoded is automatically initialized to the proper customization variable
// NOTE: JQuery 1.9.1 is automatically loaded
    
_myFeed.init = function(options) {
    // Misc init step - needs to call _myFeed.fetch(options)
    _rteCaptureApi.webscraper.setAutoCaptureMode("off"); // optional, allows control of screncapture timing
    _myFeed.fetch(options);
}

_myFeed.fetch = function(options) {
    // Fetches data and needs to callback _myFeed.render(data)
    _adapterLibrary.fetchRss(_sourceUrl, function(data) {
        _myFeed.render(data, options);
    });
}

_myFeed.render = function(data, options) {
    // renders on the page
    var stringInsert = "", dateTime;
    $.each(data.responseData.feed.entries, function(e, item) {
        stringInsert += '<li><div class="itemTitle"><a href="' + item.link + '" >' + item.title + "</a></div>";
        dateTime = new Date(item.publishedDate);
        stringInsert += '<div class="itemDate">' + dateTime.toLocaleDateString() + "</div>";
        stringInsert += '<div class="itemContent">' + item.content + "</div>";
    });
    $targetElem = $("body").append("<div id='targetContainer'><ul class='feedlist'>" + stringInsert + "</ul></div>");
    setTimeout(function(){ 
        _rteCaptureApi.webscraper.capture(); 
        // optional, executes the capture
    },250); 
} 

_myFeed.init(null);

The two important methods above are _myFeed.fetch() and _myFeed.render(). It is recommended that any code you write has these two methods implemented.

  • The fetch method does two things: first, it connects to the data source (_sourceUrl). Second, it parses out the output to create a JSON object containing the data to pass to _myFetch.render();

In the fetcher code, you will notice this _adapterLibrary.fetchRss() call. This is a utility method provided by Liveclicker to fetch and parse generic RSS feeds. You can use it on almost any blog RSS or XML.

Another utility method provided is _adapterLibrary.fetchHtml(), which takes a URL, performs an HTTP request, and calls the callback function with the raw HTML response as a string. This string can then be parsed using jQuery or searched manually.

Copy

Example

_adapterLibrary.fetchHtml(_sourceUrl, function(data) {
   var newsitems = $(data.trim()).find(".newsitem");
   _myFeed.render(newsitems, options);
});

  • The render method takes the data as input, then appends the DOM of the internal page to populate it with feed items.

The init method is a simple way to initialize the fetch and rendering process. You may use it to pass options for example.

Setting a dynamic clickthrough URL

If your custom feed also needs to fetch a dynamic clickthrough URL, you can use the following method to do so:

Copy 
_rteCaptureApi.webscraper.setClickthroughUrl(theUrl); 
// theUrl needs to be a fully qualified HTTP URL

This can allow powerful experiences where you have control of both the content rendered by the feed but also the click-through URL.

Note: If you use this method we highly recommend you use the "Timing control" methods described below to ensure the clickthrough URL is always collected and properly set.

Don't forget to check the "Dynamically update Clickthrough URL using Custom Connector Code" checkbox in the custom feed setup page.

Timing control

By default, the webscrape is executed when the connector code fully executes. However, there are cases where the webscrape might fire off before the content is fully fetched and rendered. If you expect performance issues in pulling data from a third party source Liveclicker recommends using the following JavaScript methods to control when the capture is executed:

Copy 
_rteCaptureApi.webscraper.setAutoCaptureMode("off"); 
// gives you a maximum of 10 seconds to get all the content rendered
_rteCaptureApi.webscraper.capture(); 
// triggers the capture

We recommend using the setAutoCaptureMode("off") method inside the _myFeed.init() initialization routine. Then, always use _rteCaptureApi.webscraper.capture() inside _myFeed.render() when all the content is ready.

Capture Dimensions control

For feeds, the height and width of the resulting capture are fixed and set in the user interface. However, you can set the dimensions of your final capture dynamically provided that you take the following steps:

1. In the _myFeed.init method, set _rteCaptureApi.webscraper.setAutoCaptureMode("off"); // to prevent the capture from firing off before you can change the desired capture area

2. In the _myFeed.init method, set _myFeed.dynamicHeightWidth = 1; // explicitly tells the webscraper to not change the output dimensions

3. Then you can use code like this to execute the proper capture dimensions:

Copy 
setTimeout(function(){
var desiredWidth = $('#targetContainer').width();
var desiredHeight = $('#targetContainer').height();
var params = {x: 0,y: 0,w: desiredWidth,h: desiredHeight};
 
_rteCaptureApi.webscraper.setClickthroughUrl(_newURL);
_rteCaptureApi.webscraper.executeCommand('setDimensionsAndExecuteTheCapture',params);
 
},3000);

Manual fallback

If your business logic requires you to use a static image (defined by a URL) rather than proceeding with a true webscrape then you can use the skipCaptureAndUseImage()

Copy 
_rteCaptureApi.webscraper.skipCaptureAndUseImage("http://www.myimage.com/22335554.png");

Please note that calling this method will stop the execution of the connector code.

Persistent name-value pair storage

The connector code can store certain information at the account level, which can be retrieved subsequently and within 24H. This can be useful for managing multiple custom feeds that share some common data source. There are two methods, one to write:

Copy 
_rteCaptureApi.webscraper.writeVariable("yourvariablename","thevaluetostore");

And another one to read:

Copy 
_rteCaptureApi.webscraper.readVariable("yourvariablename");

The above method returns the string "undefined" if the string has not been defined.

Access to version properties

Access to certain version properties is permitted within the connector code:

  • version_id (integer) is relevant to the version being rendered
  • parent_feed_id (integer) points to the parent element
  • destination (string) the clickthrough URL
  • custom_url_datasource (string) is also accessible via _sourceUrl
  • set_width (integer) width for the version (as configured in the UI)
  • set_height (integer) height for the version (as configured in the UI)
  • fallback_image (string) URL of the fallback image configured by the user in the UI
  • fallback_image_width (integer) width of the fallback image
  • fallback_image_height (integer) height of the fallback image
  • fallback_image_original (string) URL of the original (not-resized) fallback image

The method to use is:

Copy 
_rteCaptureApi.versionSettings.getProperty(varName)

Example:

Copy 
_rteCaptureApi.versionSettings.getProperty("fallback_image");

Access to user profile properties

If you are sending user profile information (in the context of triggers for instance), you can gain access to user-level properties stored by Liveclicker using the _user class.

Copy 
var last_cat = _user.get("last_category");

If the user cannot be found, then the get() method returns null.

Size Limit

The maximum file size for a connector code is 65,535 bytes.